<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>人体运动功能检测评估报告</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <th:block th:include="include :: header('日期和时间')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <h2 align="center">人体运动功能检测评估报告</h2>
        <div class="panel-body">
            <label class="col-sm-1 control-label">姓名：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.userName}" class="form-control"></div>
            <label class="col-sm-1 control-label">年龄：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.age}" class="form-control"></div>
            <label class="col-sm-1 control-label">性别：</label><div class="col-sm-2"><input type="text" disabled="" th:value="${sex}" class="form-control"></div>
            <label class="col-sm-1 control-label">身高：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.height}" class="form-control"></div>
            <label class="col-sm-1 control-label">体重：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.weight}" class="form-control"></div>
            <label class="col-sm-1 control-label">鞋码：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.shoe}" class="form-control"></div>
            <label class="col-sm-1 control-label">脚长：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.foot}" class="form-control"></div>
            <label class="col-sm-1 control-label">联系方式：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.phonenumber}" class="form-control"></div>
            <label class="col-sm-1 control-label">病历：</label><div class="col-sm-11"><input type="text" disabled="" th:field="*{user.medical}" class="form-control"></div>
            <label class="col-sm-1 control-label">日期范围选择：</label>
            <div class="col-sm-9">
                <div class="input-daterange input-group">
                    <input type="text" class="input-sm form-control" id="laydate-startTime" placeholder="yyyy-MM-dd HH:mm:ss"/>
                    <span class="input-group-addon">到</span>
                    <input type="text" class="input-sm form-control" id="laydate-endTime" placeholder="yyyy-MM-dd HH:mm:ss"/>
                </div>
            </div>
            <div class="col-sm-2">
                <button class="btn btn-primary " type="button" th:onclick="sendLineIm()"><i class="fa fa-check"></i>开始</button>
                <button class="btn btn-warning " type="button" th:onclick="stopLineIm()"><i class="fa fa-warning"></i>停止</button>
            </div>

            <div align="center" class="col-sm-12">
                <canvas id='footleft' width='170' height='355' style='border:1px solid #000000;background:url(../img/foot-left.jpg);'></canvas>
                <canvas id='footright' width='170' height='355' style='border:1px solid #000000;background:url(../img/foot-right.jpg);'></canvas>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/js/sockjs.min.js}"></script>
<script th:src="@{/js/stomp.js}"></script>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript">
    $(function(){
        <!-- laydate示例 -->
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            var startDate = laydate.render({
                elem: '#laydate-startTime',
                type: 'datetime',
                theme: 'molv',
                trigger: 'click',
                done: function(value, date) {
                    // 结束时间大于开始时间
                    if (value !== '') {
                        endDate.config.min.year = date.year;
                        endDate.config.min.month = date.month - 1;
                        endDate.config.min.date = date.date;
                    } else {
                        endDate.config.min.year = '';
                        endDate.config.min.month = '';
                        endDate.config.min.date = '';
                    }
                }
            });

            var endDate = laydate.render({
                elem: '#laydate-endTime',
                type: 'datetime',
                theme: 'molv',
                trigger: 'click',
                done: function(value, date) {
                    // 开始时间小于结束时间
                    if (value !== '') {
                        startDate.config.max.year = date.year;
                        startDate.config.max.month = date.month - 1;
                        startDate.config.max.date = date.date;
                    } else {
                        startDate.config.max.year = '';
                        startDate.config.max.month = '';
                        startDate.config.max.date = '';
                    }
                }
            });
        });
    });

    function sendLineIm(){
        $.ajax({
            type: "post",
            dataType: "json",
            data: {
                userId: userId,
                startTime: $('#laydate-startTime').val(),
                endTime: $('#laydate-endTime').val()
            },
            url: "/common/sendLineIm",
            success: function (res) {
                console.log(res);
                if(res.code != 0){
                    $.modal.msgError(res.msg);
                }
            }
        });
    }

    function stopLineIm(){
        $.ajax({
            type: "post",
            dataType: "json",
            data: {
                userId: userId
            },
            url: "/common/stopLineIm",
            success: function (res) {
                if(res.code != 0){
                    $.modal.msgError(res.msg);
                }
            }
        });
    }

    const defaultColorStops = {
        '0.0': '#ffffff',
        '0.3': '#00ff00',
        '0.6': '#ffff00',
        '1.0': '#ff0000',
    }
    const width = 256;
    const height = 1;

    // 创建一条宽为256,高为1的像素带，颜色可自定义。
    function getColorPaint() {
        let paletteCanvas = document.createElement('canvas')
        paletteCanvas.width = width
        paletteCanvas.height = height
        let ctx = paletteCanvas.getContext('2d')
        let linearGradient = ctx.createLinearGradient(0, 0, width, height)
        for (const key in defaultColorStops) {
            // 绘制彩色渐变色条
            linearGradient.addColorStop(key, defaultColorStops[key])
        }
        ctx.fillStyle = linearGradient
        ctx.fillRect(0, 0, width, height)
        // 获取色带图像上的像素点。（像素信息为[r, g, b, a, r, g, b, a…]，数组中容纳了所有的像素点信息，每个像素点依次排列，每个像素点信息包含r、g、b、a，总共有256个r、g、b、a）
        return ctx.getImageData(0, 0, width, height).data
    }
    var stomp = null;
    var url = "https://sunfu.xdkdate.com/webSocket"
    // var url = "https://www.bythealthy.com/sunfu/webSocket"
    // var url = "http://localhost:8009/webSocket"
    var socket = new SockJS(url);
    var userId = [[${user.userId}]]
    stomp = Stomp.over(socket);
    //连接
    stomp.connect({}, function (frame) {
        //订阅广播
        stomp.subscribe("/user/"+ userId +"/message", function (res) {
            // $("#broadcastMsg").val(res.body);
            var obj = eval('('+res.body+')');
            if(obj.pointNum == 4){
                if(obj.position == 1) {
                    var data = [
                        {
                            x: 120, y: 120, value: obj.data0
                        },
                        {
                            x: 45, y: 120, value: obj.data1
                        },
                        {
                            x: 55, y: 210, value: obj.data2
                        },
                        {
                            x: 65, y: 280, value: obj.data3
                        }
                    ];
                    createImg("footleft", data);
                }else{
                    var data = [
                        {
                            x: 50, y: 120, value: obj.data0
                        },
                        {
                            x: 125, y: 120, value: obj.data1
                        },
                        {
                            x: 115, y: 210, value: obj.data2
                        },
                        {
                            x: 105, y: 280, value: obj.data3
                        }
                    ];
                    createImg("footright", data);
                }
            }else if(pointNum == 8){
                if(obj.position == 1) {
                    var data = [
                        {
                            x: 145, y: 45, value: obj.data0
                        },
                        {
                            x: 120, y: 120, value: obj.data1
                        },
                        {
                            x: 45, y: 120, value: obj.data2
                        },
                        {
                            x: 50, y: 160, value: obj.data3
                        },
                        {
                            x: 55, y: 210, value: obj.data4
                        },
                        {
                            x: 55, y: 240, value: obj.data5
                        },
                        {
                            x: 65, y: 280, value: obj.data6
                        },
                        {
                            x: 65, y: 320, value: obj.data7
                        }
                    ];
                    createImg("footleft",data);
                }else{
                    var data = [
                        {
                            x: 25, y: 45, value: obj.data0
                        },
                        {
                            x: 50, y: 120, value: obj.data1
                        },
                        {
                            x: 125, y: 120, value: obj.data2
                        },
                        {
                            x: 120, y: 160, value: obj.data3
                        },
                        {
                            x: 115, y: 210, value: obj.data4
                        },
                        {
                            x: 115, y: 240, value: obj.data5
                        },
                        {
                            x: 105, y: 280, value: obj.data6
                        },
                        {
                            x: 105, y: 320, value: obj.data7
                        }
                    ];
                    createImg("footright",data);
                }
            }
        });
    });

    function createImg(canvasId,data) {
        var canvas = document.getElementById(canvasId);
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, 170, 355);
        var radius = 50;
        var max = 90;
        var min = 0;
        data.forEach(point => {
            let {
                x,
                y,
                value
            } = point;
            // 开始为每个数据点绘制圆，圆心为[x,y]，半径为radius
            context.beginPath();
            context.arc(x, y, radius, 0, 2 * Math.PI);
            context.closePath();
            // 给圆加上渐变色，圆心至边的渐变色为#000至透明
            let radialGradient = context.createRadialGradient(x, y, 0, x, y, radius);
            radialGradient.addColorStop(0, 'rgba(0,0,0,1)');
            radialGradient.addColorStop(1, 'rgba(0,0,0,0)');
            context.fillStyle = radialGradient;
            // 给圆加上透明度，值为globalAlpha
            let globalAlpha = (value - min) / (max - min);
            context.globalAlpha = Math.max(Math.min(globalAlpha, 1), 0);
            context.fill();
        });
        let palette = getColorPaint();
        // 再获取整张800 * 800画布上的像素信息pointImgData（含灰度渐变圆）（同样，像素信息为[r, g, b, a, r, g, b, a…]）
        let pointImg = context.getImageData(0, 0, 170, 355);
        let pointImgData = pointImg.data;
        // 获取pointImgData中每个像素点point的alpha值（范围0-255），根据获取到的alpha值，再到色带上一一对应，取色带上对应的像素点（rgb）覆盖到point上。（如当前取到的alpha值为0，则在彩色渐变色带上获取到的便是第一个像素点；若当前取到的alpha值为50，则是第50个像素点。）
        for (var i = 3; i < pointImgData.length; i += 4) {
            let alpha = pointImgData[i];
            let offset = alpha * 4;
            pointImgData[i - 3] = palette[offset];
            pointImgData[i - 2] = palette[offset + 1];
            pointImgData[i - 1] = palette[offset + 2];
        }
        context.putImageData(pointImg, 0, 0);
    }
</script>
</body>
</html>
